<template>
  <div class="taskListBox">
    <div class="taskListBox_title flexbet">
      <el-tooltip class="item" effect="dark" placement="bottom-start">
        <div class="courseName overtxt shou">
          {{ form.courseName }}
        </div>
        <div slot="content">{{ form.courseName }}</div>
      </el-tooltip>

      <div class="allExpand flex shou" @click="handleUnfold">
        <img
          v-if="activeNames.length == 0"
          src="@/assets/images/courseadd/expand.png"
          alt=""
        />
        <img v-else src="@/assets/images/courseadd/shrink.png" alt="" />
        {{ activeNames.length == 0 ? "全部展开" : "全部收起" }}
      </div>
    </div>
    <div
      class="taskListBox_btns flexbet"
      v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
    >
      <div class="flex shou taskListBox_btn" @click="handleTaskClassification">
        <img class="gset" src="@/assets/images/courseadd/gset.png" alt="" />
        <img class="set" src="@/assets/images/courseadd/set.png" alt="" />
        任务分类
      </div>
      <div class="flex shou taskListBox_btn" @click="handleQuestionBox">
        <img src="@/assets/images/courseadd/question.png" alt="" />
        题库
      </div>
      <div class="flex shou taskListBox_btn" @click="handleAddTask">
        <img class="gadd" src="@/assets/images/courseadd/gadd.png" alt="" />
        <img class="add" src="@/assets/images/courseadd/add.png" alt="" />
        添加任务
      </div>
    </div>
    <div
      class="taskListBox_tip flex"
      v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
    >
      <div>注：任务和步骤均可通过拖拽来调整排序</div>
      <!-- <div
                  style="color: #28b28b; margin-left: 10px; cursor: pointer"
                  v-if="type !== 'detail' && type !== 'audit'"
                >
                  预览
                </div> -->
    </div>
    <div
      class="taskListBox_tree"
      :style="{
        marginTop:
          ($route.query.type == 'add' || $route.query.type == 'edit' ? 0 : 24) +
          'px',
      }"
    >
      <!-- 为空的任务列表显示状态 -->
      <el-empty
        v-if="
          ccCourseChapterTemporaryList &&
          ccCourseChapterTemporaryList.length == 0
        "
        description="暂无任务~"
      ></el-empty>
      <!-- 任务列表 -->
      <el-collapse v-else v-model="activeNames">
        <vuedraggable
          :disabled="vuedraggable_disabled"
          v-model="ccCourseChapterTemporaryList"
          @end="onEnd()"
          @choose="onStart('chapter')"
        >
          <el-collapse-item
            v-for="(item, index) in ccCourseChapterTemporaryList"
            :key="index"
            :name="index"
          >
            <template slot="title">
              <!-- 任务 -->
              <div
                @click="
                  collapseClick(item.chapterName, item.id, 'chapter', index)
                "
                :class="[
                  selectedId == 'chapter' + item.id ? 'taskLine_actvie' : '',
                  'taskLine',
                  'flexbet',
                ]"
              >
                <div class="flex">
                  <!-- 箭头 -->
                  <img
                    :class="[
                      activeNames.includes(index) ? 'arrow90' : '',
                      'arrow',
                    ]"
                    src="@/assets/images/courseadd/pickup.png"
                    alt=""
                  />
                  <!-- 变换区域 -->
                  <div class="flex" v-if="!item.edit">
                    <div class="name overtxt">
                      {{ item.chapterName }}
                    </div>
                    <div
                      class="status"
                      style="color: #28b28b; background: rgba(196, 236, 226)"
                      v-if="item.type == 0"
                    >
                      必学
                    </div>
                    <div
                      class="status"
                      v-if="item.type == 1"
                      style="color: #2cacff; background: rgba(213, 238, 255)"
                    >
                      选学
                    </div>
                    <div
                      class="status"
                      v-if="item.type == 2"
                      :style="{
                        color: item.font,
                        background: item.bg,
                      }"
                    >
                      n选{{ item.mustNum }}
                    </div>
                  </div>
                  <div v-else style="width: 230px">
                    <el-input
          v-input-restrict
                      v-model="item.chapterName"
                      ref="resetName"
                      size="mini"
                      @click.stop=""
                      @keyup.enter.native="
                        handleEditTask(
                          item,
                          index,
                          false,
                          'finishEdit',
                          'chapter'
                        )
                      "
                      @blur="
                        handleEditTask(
                          item,
                          index,
                          false,
                          'finishEdit',
                          'chapter'
                        )
                      "
                    ></el-input>
                  </div>
                  <!--  -->
                </div>
                <el-dropdown
                  placement="bottom-start"
                  trigger="click"
                  v-if="
                    $route.query.type == 'add' || $route.query.type == 'edit'
                  "
                >
                  <img
                    class="more"
                    src="@/assets/images/courseadd/more.png"
                    alt=""
                    @click.stop=""
                  />
                  <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item @click.native.stop="">
                                <span>下方添加任务</span>
                              </el-dropdown-item> -->
                    <el-dropdown-item
                      @click.native.stop="handleAddLink(item, index)"
                    >
                      <span>添加子步骤</span>
                    </el-dropdown-item>
                    <!-- 取消handleEditTask(item, index, false, 'cancelEdit',''chapter'') -->
                    <el-dropdown-item
                      @click.native.stop="
                        handleEditTask(
                          item,
                          index,
                          true,
                          'startEdit',
                          'chapter'
                        )
                      "
                    >
                      <span>重命名</span>
                    </el-dropdown-item>
                    <el-dropdown-item
                      @click.native.stop="handleDelTask(item, index)"
                    >
                      <span>删除</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>

            <!-- 步骤列表 -->
            <vuedraggable
              :disabled="vuedraggable_disabled"
              v-model="item.ccCourseTaskTemporaryList"
              @end="onEnd()"
              @choose="onStart('task', item)"
            >
              <div
                :class="[
                  selectedId == 'task' + item2.id ? 'taskLine_actvie' : '',
                  'linkLine',
                  'flex',
                  'shou',
                ]"
                @click.stop="
                  collapseClick(item2.taskName, item2.id, 'task', index, index2)
                "
                v-for="(item2, index2) in item.ccCourseTaskTemporaryList"
                :key="index2"
              >
                <div class="flexcolcenter">
                  <div class="statusblock flexcolcenter">
                    <div
                      v-if="item2.examId || item2.offlineExamId"
                      class="status"
                    >
                      考核步骤
                    </div>
                  </div>
                  <div class="name overtxt" v-if="!item2.edit">
                    {{ item2.taskName }}
                  </div>
                  <div v-else class="name">
                    <el-input
          v-input-restrict
                      ref="resetName"
                      v-model="item2.taskName"
                      size="mini"
                      @click.stop=""
                      @keyup.enter.native="
                        handleEditTask(
                          item2,
                          index,
                          false,
                          'finishEdit',
                          'task',
                          index2
                        )
                      "
                      @blur="
                        handleEditTask(
                          item2,
                          index,
                          false,
                          'finishEdit',
                          'task',
                          index2
                        )
                      "
                    ></el-input>
                  </div>
                </div>

                <el-dropdown
                  placement="bottom-start"
                  class="avatar-container right-menu-item hover-effect"
                  v-if="
                    $route.query.type == 'add' || $route.query.type == 'edit'
                  "
                  trigger="click"
                >
                  <img
                    class="more shou"
                    src="@/assets/images/courseadd/more.png"
                    alt=""
                    @click.stop=""
                  />
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      @click.native.stop="
                        handleEditTask(
                          item2,
                          index,
                          true,
                          'startEdit',
                          'task',
                          index2
                        )
                      "
                    >
                      <span>重命名</span>
                    </el-dropdown-item>
                    <el-dropdown-item
                      @click.native.stop="handleDelLink(item2, index, index2)"
                    >
                      <span>删除</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </vuedraggable>
          </el-collapse-item>
        </vuedraggable>
      </el-collapse>
    </div>
  </div>
</template>
